<template>
  <div class="app-container">
    <FormCom class="form-search" ref="search" :columns="columns"  v-show="showSearch"/>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:endangeredAdministration:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:endangeredAdministration:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:endangeredAdministration:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:endangeredAdministration:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <TableCom
      :columns="tableColumns"
      :options="tableOptions"
      @selection-change="handleSelectionChange"
      @getList="getList"
    />

  </div>
</template>

<script>

  const form = [
    { text:"物种中文名称",name:"speciesNameCn",type:"input"},
    { text:"物种拉丁文名称",name:"speciesNameLatin",type:"input"},
    { text:"关键字",name:"keyWord",type:"input"},
    { text:"科",name:"section",type:"input" },
    { text:"属",name:"genus",type:"input" },
    { text:"公约级别",name:"conventionLevel",type:"input" },
    { text:"国家保护级别",name:"countryProtectLevel",type:"input" },
    { text:"类别",name:"category",type:"input" },
    { text:"是否有效",name:"isValid",type:"select",options:"whether_valid" },
  ]
  const formRules = {
    speciesNameCn: ["required"],
    speciesNameLatin: ["required"],
    keyWord: ["required"]
  }

  export default {
    name: "Administration",
    data() {
      return {
        columns:[
          { text:"物种中文名称",name:"speciesNameCn",type:"input"},
          { text:"物种拉丁文名称",name:"speciesNameLatin",type:"input"},
          { text:"关键字",name:"keyWord",type:"input"},
          { type:"label",searchButton:{listQuery:this.handleQuery, listReset:this.resetQuery}},
        ],
        tableColumns:[
          { type:"selection" },
          { type:"index" },
          { prop:"speciesNameCn",label:"物种中文名称",width:160 },
          { prop:"speciesNameLatin",label:"物种拉丁文名称",width:260 },
          { prop:"keyWord",label:"关键字",width:260 },
          { prop:"section",label:"科",width:100 },
          { prop:"genus",label:"属",width:100 },
          { prop:"conventionLevel",label:"公约级别",width:100 },
          { prop:"countryProtectLevel",label:"国家保护级别",width:100 },
          { prop:"category",label:"类别",width:80 },
          { prop:"isValid",label:"是否有效",width:160,dict:"whether_valid" },
          { prop:"",label:""},
          { label:"操作",prop:"_",width:"180",align:"center",fixed:"right",className:"",options:[
              {text:"修改",props:{type:'primary',icon:"el-icon-edit"},onClick:this.handleUpdate},
              {text:"删除",props:{type:'primary',icon:"el-icon-delete"},onClick:this.handleDelete},
            ]
          }
        ],
        tableOptions:{
          pageNum: 1,
          pageSize: 10,
          descs:"create_time",
          order: "desc",
          total:0,
          loading:false,
          data:[]
        },
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true
      };
    },
    mounted() {
      this.getList();
    },
    methods: {
      /** 查询【请填写功能名称】列表 */
      getList() {
        let pm = this.$refs.search.getData();
        pm = Object.assign(_.pick(this.tableOptions,['pageNum','pageSize']),pm);
        this.loading = true;
        this.api("endanger_administration.list",pm,this.tableOptions).then((response)=>{
          this.tableOptions.data = response.rows;
          this.tableOptions.total = response.total;
          this.$forceUpdate();
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.tableOptions.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$refs.search.resetForm();
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.dialogEdit({
          PATH_SAVE:"endanger_administration.add",
          labelWidth:"9em",
          columns:form,
          rules:formRules
        },()=>{
          this.getList();
        })
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.dialogEdit({
          row,
          PATH_SAVE:"endanger_administration.update",
          labelWidth:"9em",
          columns:form,
          rules:formRules
        },()=>{
          this.getList();
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm(`是否确认删除【${row.speciesNameCn}】的数据项？`).then(function() {
          return this.api("endanger_administration.del",ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        let pm = this.$refs.search.getData();
        this.download('system/administration/export', {...pm}, `administration_${new Date().getTime()}.xlsx`)
      }
    }
  }
</script>
